<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
	<title>My First JSF Application</title>
	<h:outputStylesheet>
		.ui-layout-center {
			z-index: 1  !important;
			overflow: visible !important;
		}
		#log pre {
		margin: 0.5em 0;
		white-space: pre-wrap;
		}
		#log {
			counter-reset: line 0;
		}
		.line {
			counter-increment: line;
			display: flex;
			flex-direction: row;
			word-break: break-all;
		}
		.line::before {
  			content: counter(line) ">";
			margin-right: 0.5em;
			min-width: 40px;
			font-weight: bold;
		}
		.tests {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			list-style-type: none;
		}
		h1 {
			margin: 0;
		}
		.tests li {
		margin: 0 0.25em;
		}
	</h:outputStylesheet>
	<script>
		var toLog = [];
		function log() {
			var args = Array.prototype.slice.call(arguments, 0);
			args.unshift(undefined);
			logColor.apply(null, args);
		}
		function logColor() {
			var args = Array.prototype.slice.call(arguments, 0);
			var color = args.shift();
			var div = document.getElementById("log");
			if (!div) {
				toLog.push(args);
				return;
			}
			else if (toLog.length !== 0) {
				for (var i = 0; i !== toLog.length; ++i) {
					var message = Array.prototype.join.call(toLog[i], "  ");
					var pre = document.createElement("pre");
					pre.setAttribute("class", "line");
					if (color) {
						pre.setAttribute("style", "color: " + color + ";");
					}
					pre.textContent = message;
					div.appendChild(pre);
				}
				toLog = [];
			}
			var message = Array.prototype.join.call(args, "  ");
			var pre = document.createElement("pre");
			pre.setAttribute("class", "line");
			if (color) {
				pre.setAttribute("style", "color: " + color + ";");
			}
			pre.textContent = message;
			div.appendChild(pre);
		}

		// Log errors
		window.addEventListener("error", function(event) {
			logColor("red", "An unhandled error occurred");
			logColor("red", event.message);
		});
	</script>
	<h:outputScript rendered="#{logXhr}">
		// Log requests
		(function(){
			// XMLHttpRequest
			var origOpen = XMLHttpRequest.prototype.open;
			XMLHttpRequest.prototype.open = function(method, url) {
				origOpen.apply(this, arguments);
				window.dispatchEvent(new CustomEvent("xhr.open", {
					detail: {
						method: method,
						url: url,
						xmlHttpRequest: this,
					},
				}));
			};
			// worker
			var origWorker = window.Worker;
			class _Worker extends origWorker {
				constructor(url, options) {
					super(url, options);
					window.dispatchEvent(new CustomEvent("xhr.open", {
						detail: {
							method: "GET",
							url: url,
							xmlHttpRequest: this,
						},
					}));
				}
			}
			window.Worker = _Worker;
		})();

		// Fetch
		var origFetch = window.fetch;
		window.fetch = function(input, init) {
			const promise = origFetch.call(this, input, init);
			window.dispatchEvent(new CustomEvent("xhr.open", {
				detail: {
					method: init ? init.method || "GET" : "GET",
					url: input,
					xmlHttpRequest: this,
				},
			}));
			return promise;
		};

		window.addEventListener("xhr.open", function(e) {
			log("AJAX request to", e.detail.url);
		});
	</h:outputScript>
	<ui:insert name="headLast" />
</h:head>
<h:body>
	<ui:insert name="bodyFirst" />
	<pe:layout fullPage="true" style="overflow:hidden;">
		<pe:layoutPane position="center" style="overflow:hidden;">
			<h:form id="form"
				style="display:flex;flex-direction: column;height:100%">
				<div>
					<p:commandButton value="Update" update="@form"
						process="@this,@form" partialSubmit="false" />
					<p:selectOneMenu value="#{testBean.uiLanguage}">
						<f:selectItems var="item" value="#{testBean.availableLanguages}" />
					</p:selectOneMenu>
					<p:inputText value="#{testBean.codeLanguage}"></p:inputText>
				</div>
				<ui:insert name="monaco" />
			</h:form>
		</pe:layoutPane>
		<pe:layoutPane position="north" initClosed="false" size="200">
			<ui:include src="./tests.xhtml" />
		</pe:layoutPane>
		<pe:layoutPane position="east" initClosed="false" size="33%">
			<h1>Log</h1>
			<div id="log"></div>
		</pe:layoutPane>
	</pe:layout>
	<script>
		$(function() {
			if (typeof window.testCase === "function") {
				try {
					window.testCase();
				} catch (e) {
					log("Failure while running test case");
					log(e.message);
					console.error(e);
				}
			} else {
				log("No test description found");
			}
		});
	</script>
	<ui:insert name="script" />
</h:body>
</html>
